<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <input type="text" v-model="name" placeholder="请输入商品名称">
        <input type="number" v-model="price" placeholder="请输入商品价格"> 
        <button @click="add">添加</button>
        <table border="1">
            <thead>
                <tr>    
                    <th><input type="checkbox" @click="allCheck"></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in arr" :key="item.id">
                    <td><input type="checkbox" v-model="item.check"></td>
                    <td>{{item.name}}</td>
                    <td>{{item.price | fn('￥')}}</td>
                    <td><button @click="jian(index)">-</button>
                        <span>{{item.num}}</span>
                        <button @click="jia(index)">+</button>
                    </td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <div>
            <h2>总价￥<span>{{total}}</span></h2>
        </div>
        <button @click="delSelect">删除选中</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isAllChecked: false,
                arr:  [
                {
                    id: 0,
                    name:'REDMI K80红米k80手机官方旗舰店游戏拍照学生旗舰智能',
                    price:246,
                    num:2,
                    check: false
                },
                {
                    id: 1,
                    name:'适用小米10屏幕总成原装10S显示pro',
                    price:250,
                    num:10,
                    check: false
                },
                {
                    id: 2,
                    name:'【政府补贴至高15%】小米15手机新品新款上市小米徕卡联合研',
                    price:666,
                    num:1,
                    check: false
                },
                ],
                name: '',
                price: ''

            },
            methods: {
                // 删除
                del(index) {
                    this.arr.splice(index, 1)
                },
                // 减数量
                jian(index) {
                    if (this.arr[index].num > 0) {
                        this.arr[index].num--
                    }
                },
                // 加数量
                jia(index) {
                    this.arr[index].num++
                },
                // 全选
                allCheck() {
                    this.isAllChecked = !this.isAllChecked;
                    this.arr.forEach(item => {
                        item.check = this.isAllChecked;
                    });
                },
                // 添加
                add() {
                    if (this.name.trim() == '' || isNaN(this.price) || this.price <= 0) {
                        alert('请输入有效的商品名称和价格');
                        return;
                    }
                    this.arr.push({
                        id: this.arr.length,
                        name: this.name,
                        price: parseFloat(this.price),
                        num: 1,
                        check: false
                    })
                    this.name = '';
                    this.price = '';
                },
                // 删除选中
                delSelect() {
                    this.arr = this.arr.filter(item => !item.check);
                }
            },
            computed: {
                total() {
                    let total = 0;
                    this.arr.forEach(item => {
                        if (item.check) {
                            total += item.num * item.price;
                        }
                    });
                    return total.toFixed(2);
                }
            },
            filters: {
                fn(price, a) {
                    return a + price.toFixed(2)
                }
            }
        })
    </script>
</body>

</html>